<template>
  <el-row>
    <el-form ref="form" label-width="140px" :model="fu" size="small" class="fu" :rules="rules" :disabled="disabled === -200 ? false : true">
      <el-form-item label="通道状态：">
        <span class="fz12" :class="enter_status < 0 ? 'err' : 'tip'">{{ enter_info }}</span>
      </el-form-item>
      <el-form-item label="错误信息：" v-if="enter_status < 0">
        <span class="fz12 err">{{ error_info }}</span>
      </el-form-item>
      <el-form-item label="联系地址：" prop="area">
        <el-cascader :options="address" class="w240"  v-model="fu.area" :props="props" clearable></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址：" prop="address">
        <el-input class="w240" v-model="fu.address" placeholder="请输入详细地址"></el-input>
      </el-form-item>
      <el-form-item label="结算周期：">
        <el-button size="mini" type="warning">T+1</el-button>
      </el-form-item>
      <el-form-item label="支付功能：" prop="need_channel">
        <el-checkbox-group class="fz12" v-model="fu.need_channel">
          <el-checkbox class="fz12" v-for="item in needChannels" :key="item.key" :label="item.key" :disabled="item.disabled">{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-row>
        <span style="margin: 0 0 10px 20px;">微信通道</span>
        <el-form-item label="签约费率：" prop="wx_rate">
          <el-input class="w200" v-model.number="fu.wx_rate" :maxlength="4"></el-input>%
        </el-form-item>
        <el-form-item label="经营类别：" multiple prop="wx_category">
          <el-select v-model="fu.wx_category" placeholder="" class="w200">
            <el-option v-for="item in wxCatgroy"
              :key="item.category_code"
              :label="item.leve_1 + '/' + item.level_2 + '/' + item.level_3"
              :value="item.category_code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <span style="margin: 0 0 10px 20px;">支付宝通道</span>
        <el-form-item label="签约费率：" prop="ali_rate">
          <el-input class="w200" v-model.number="fu.ali_rate" :maxlength="4"></el-input>%
        </el-form-item>
        <el-form-item label="经营类别：" prop="ali_category">
          <el-select v-model="fu.ali_category" placeholder="" class="w200">
            <el-option v-for="item in aliCategroy"
              :key="item.category_id"
              :label="item.category_name"
              :value="item.category_id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-form-item v-if="disabled === -200">
        <el-button type="primary" size="small" @click="handleClickOnSubmit" :loading="btnSubmit">提交审核</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
import { merchantChannelFuQuery, merchantChannelFuUpdate } from '@/api/shop'

export default {
  data() {
    return {
      btnSubmit: false,
      disabled: 100,
      options: [],
      enter_status: null,
      enter_info: null,
      error_info: '',
      needChannels: [
        {
          key: 50,
          disabled: true,
          label: '银联（微信）条码支付'
        },
        {
          key: 51,
          disabled: true,
          label: '银联（微信）扫码支付'
        },
        {
          key: 52,
          disabled: true,
          label: '银联（微信）公众号支付'
        },
        {
          key: 53,
          disabled: true,
          label: '银联（微信）小程序支付'
        },
        {
          key: 54,
          disabled: true,
          label: '银联（微信）固定二维码支付'
        },
        { key: 1, disabled: true, label: '支付宝扫码支付' },
        { key: 2, disabled: true, label: '支付宝条码支付' },
        { key: 3, disabled: true, label: '支付宝一码多付' }
      ],
      props: {
        value: 'code',
        label: 'alias',
        children: 'city'
      },
      fu: {
        area: [],
        address: '',
        wx_category: '',
        wx_rate: '',
        ali_rate: '',
        ali_category: '',
        need_channel: [50, 51, 52, 53, 54, 1, 2, 3]
      },
      rules: {
        area: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        wx_category: [{ required: true, trigger: 'change', message: '必须填写哦~' }],
        ali_category: [{ required: true, trigger: 'change', message: '必须填写哦~' }],
        need_channel: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        address: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        ali_rate: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        wx_rate: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }]
      }
    }
  },
  props: {
    address: {
      required: true,
      type: Array
    },
    wxCatgroy: {
      required: true,
      type: Array
    },
    aliCategroy: {
      required: true,
      type: Array
    }
  },
  methods: {
    handleClickOnSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.btnSubmit = true
          merchantChannelFuUpdate(this.$route.query.merchant_num, this.fu).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success(res.data.errorMsg)
              this.disabled = 100
              this.btnSubmit = false
            } else {
              this.$message.error(res.data.errorMsg)
              this.btnSubmit = false
            }
          })
        }
      })
    }
  },
  created() {
    merchantChannelFuQuery(this.$route.query.merchant_num).then(res => {
      if (res.data.errorCode === 0) {
        this.fu.area = res.data.result.area.code
        this.fu.address = res.data.result.address
        this.fu.wx_rate = Number(res.data.result.wx_rate)
        this.fu.ali_rate = Number(res.data.result.ali_rate)
        this.fu.wx_category = res.data.result.wx_category.code
        this.fu.ali_category = res.data.result.ali_category.code
        this.disabled = res.data.result.channel_status
        this.enter_status = res.data.result.enter_status.code
        this.enter_info = res.data.result.enter_status.name
        this.error_info = res.data.result.enter_status.error_info
      } else {
        this.disabled = -200
      }
    })
  }
}
</script>